<!--自定义登录页面-->
<template>
	<view :class="config.style">
		<view class="login-section">
			<view class="title">登录</view>
			<view class="reg">
				<text>还没有账号,</text>
				<text class="join-reg">立即注册</text>
			</view>
			
			<view class="form">
				<view class="receiver">
					<input class="uni-input" focus :placeholder="placeholder" v-model="receiver" />
				</view>
				<view class="verify-code">
					<view class="input">
						<input class="uni-input" placeholder="验证码" v-model="code" />
					</view>
					<view class="send-code">
						<button type="default" size="mini" class="button" hover-class="button-hover" v-if="countdown>=60" @click="getVerifyCode()">
							获取验证码
						</button>
						<button type="default" size="mini" class="button disabled" v-else disabled="true">
							{{countdown}} S
						</button>
					</view>
				</view>
			</view>
			
			<view class="agreen">
				<label class="radio">
					<radio value="r2" />
				</label>
				<text>我已阅读并同意</text>
				<text class="one">《用户服务协议》</text>
				<text>和 </text>
				<text class="two">《隐私政策》</text>
			</view>
			
			<view class="submit">
				<button type="default" class="button" hover-class="button-hover" @click="submit()">登 陆</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	export default {
		data() {
			return {
				urlParams: {},
				placeholder: '请输入手机号码',
				receiver: '',  //邮箱或手机号码
				code: '', //验证码
				countdown: 60, //倒计时
			}
		},
		onLoad(option) {
			//获取url参数
			this.urlParams = option
		},
		computed: {
			...mapState(['config'])
		},
		methods: {
			/**
			 * 获取验证码
			 */
			getVerifyCode: function(){
				let that = this
				let receiver = this.receiver
				let data = {
					action : 'verify_code',
					target : 'send_code',
					receiver : receiver,
					m: 'muu_classroom'
				}
				//获取
				let url = ''
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/ucenter'
					//#endif
					//#ifdef H5
					url = 'entry/site/ucenter'
					//#endif
				this.util.request({
					url : url,
					data: data,
					success: function (res) {
						//console.log(res.data);
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
						// 发送成功后，倒计时开始
						if(res.data.code == 200){
							let n = 60;
							var o = setInterval(function() {
								if(--n <= 0){
									clearInterval(o);
									n = 60;
								}
								that.countdown = n
								//console.log(that.countdown)
							},1000);
						}
						
					},
					fail: function(){
						uni.showToast({
							title: '发送错误',
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			
			/**
			 * 提交绑定
			 */
			submit: function(){
				let that = this
				let receiver = this.receiver
				let code = this.code
				let data = {
					code : code
				}
				//手机
				data.action = 'login'
				data.mobile = receiver
				
				//获取全局配置
				let url = ''
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/ucenter'
					//#endif
					//#ifdef H5
					url = 'entry/site/ucenter'
					//#endif
				this.util.request({
					url : url,
					data: data,
					method: 'POST',
					success: function (res) {
						//console.log(res.data);
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
						// 成功后返回上一页
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: function(){
						uni.showToast({
							title: '发生错误',
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	
	.login-section {
		padding: 20rpx;
		.title {
			font-size: 36rpx;
			font-weight: 600;
		}
		.reg {
			
		}
		
		.form {
			margin-top: 40rpx;
			margin-bottom: 40rpx;
			.receiver {
				background-color: #fff;
				border-bottom: 2rpx solid #f8f8f8;
				padding: 10rpx 20rpx;
				input {
					height: 92rpx;
					line-height: 92rpx;
				}
			}
			.verify-code {
				background-color: #fff;
				padding: 10rpx 20rpx;
				display: flex;
				.input {
					flex: 1;
					input {
						height: 92rpx;
						line-height: 92rpx;
					}
				}
				.send-code {
					width: 220rpx;
					padding-top: 20rpx;
					button {
						color: #fff;
						width: 100%;
					}
					button.disabled {
						color: #999;
						background-color: #f7f7f7;
						width: 100%;
					}
				}
			}
		}
		.agreen {
			font-size: 26rpx;
			color: #666;
			.radio {
				transform:scale(0.7);
			}
			
		}
		.submit {
			margin-top: 60rpx;
			button {
				color: #fff;
				border-radius: 50rpx;
				&:after {
					border-radius: 50rpx;
				}
			}
		}
	}
	
	/*页面风格设计*/
	.Blue {
		.button {
			background-color: $Blue;
		}
		.button-hover {
			background-color: $Blue-hover;
		}
	}
	.Green {
		.button {
			background-color: $Green;
		}
		.button-hover {
			background-color: $Green-hover;
		}
	}
	.LightRed {
		.button {
			background-color: $LightRed;
		}
		.button-hover {
			background-color: $LightRed-hover;
		}
	}
	.Orange {
		.button {
			background-color: $Orange;
		}
		.button-hover {
			background-color: $Orange-hover;
		}
	}
	.LightPink {
		.button {
			background-color: $LightPink;
		}
		.button-hover {
			background-color: $LightPink-hover;
		}
	}
	.Magenta {
		.button {
			background-color: $Magenta;
		}
		.button-hover {
			background-color: $Magenta-hover;
		}
	}
</style>
